<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="libs/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="pub/JSCommonUtil.js"></script>
		<title>jc-bind</title>
	</head>


	<body>
		<p>
			"jc-bind-响应事件" ，例如 jc-bind-click ,jc-bind-change, 不写的话，有默认的符合一般逻辑的触发事件。
			
			获取数据的话，直接 jc.th($渲染模板的div jquery selector).data()</p>
		<p>
			<span style='color:red'>注意，jc－bind值会根据input type类型转换成数字 或者字符串</span>
		</p>
		<div id="father1">
			
		</div>
		<h2>加载顺序</h2>
		<div id='father2'>
			
		</div>
		<h2>jc-repeat 混合</h2>
		<div id="father3">
			
		</div>

		<h2>普通form模板</h2>
		<div id='father4'>
			
		</div>
		<script type="text/javascript">
		var session={};
		$(function(){
			var data={
				value:"value",
				isTrue:true,
				select:"select"
			}
			jc.render(data,"test_bind_1",$('#father1'),function(){
				console.log("OK");
				console.log("4s后，刷数据变化")
				setTimeout(function(){
					console.log("father1 data:")
					console.log(jc.th($('#father1')).data())
				},4000)
			})
			jc.render({a:1,b:2},"test_bind_2",$("#father2"),function(){
				console.log("OK fahter 2");
				
				setTimeout(function(){
					console.log("father2 data:")
					console.log(jc.th($('#father2')).data())
				},1000)
			})
			var data2={
				elem:[
				{i:1,val:"value1"},
				{i:2,val:"value2"},
				{i:3,val:"value3"}
				]
			}
			jc.render(data2,"test_bind_3",$("#father3"),function(){
				console.log("father3 OK")
			})
			var data3 ={
				text:"text",
				pwd:'password',
				check1:true,
				check2:false,
				check3:"否",
				check4:"enable",
				number:1,
				radio:"男",
				select:"2",
				selectData:[
					{key:"1",value:"value1"},
					{key:"2",value:"value2"},
					{key:"3",value:"value3"}
				],
				textarea:"textarea"
			}
			jc.render(data3,"test_bind_4",$("#father4"),function(){
				console.log("father4 ok")
				var v=data3.text;
				Object.defineProperty(jc.th($("#father4")).data(),"text",{
					set:function(val){
						v=val
					},
					get:function(){
						return v
					}
				})
				
				jc.th($("#father4")).bind(jc.mix(true,{},data3),function(value,path){
					console.log("path:"+path+" change to "+value)
				})
			})
		})
		</script>
	</body>
</html>